<template>
  <div class="container">
    <div class="body1" :style="myDiv">
      <div class="f1" :style="div2"></div>
    </div>
    <div class="button-group">
      <button @click="changeRB">动态样式</button>
      <button @click="logout">退出登录</button>
      <button @click="chat">进入豆包</button>
    </div>
    <button @click="tohalo">tohalo</button> 
    <div v-text="message"></div>
    <div class="img">
        <div class="img1" v-for="(item, index) in imgs" :key="index">
            <img :src="item" alt="" v-if="index % 2 === 0">
        </div>
    </div>
  </div>
</template>

<script>
const a1Img = require('@/assets/a1.jpg')
const a2Img = require('@/assets/a2.jpg')
const a3Img = require('@/assets/a3.jpg')


export default {
  name: 'Lingin-x',
  data() {
    return {
         imgs: [
            a1Img,a2Img,a3Img
            ],
            message: 'test message',
            body1: '',
            f1: '',
      myDiv: {
        backgroundColor: 'green',
        width: '500px',
        height: '500px'
      },
      div2: {
        backgroundColor: 'red',
        width: '100px',
        height: '100px'
      }
    }
  },
  methods: {
    changeRB() {
      // 动态修改样式
      this.myDiv.backgroundColor = 'blue';
      this.myDiv.width = '600px';
      this.myDiv.height = '600px';
      
      this.div2.backgroundColor = 'yellow';
      this.div2.width = '150px';
      this.div2.height = '150px';
      this.div2.borderRadius = '50%'; // 添加圆角
    },
    logout() {
      sessionStorage.setItem('showLogin', '1');
      this.$router.push('/LoginApp')
        .catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            console.error('路由跳转错误:', err);
          }
        });
    },
     tohalo() {
    this.$router.push('/halo')
    },
    chat() {
      sessionStorage.setItem('showLogin', '1');
      this.$router.push('/doubaochat')
    }
  }
  

}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.button-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

button {
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}
</style>